let _Vue = null


//Vue.use(VueRouter) 会调用VueRouter类的install方法传入Vue构造函数
export default  class VueRouter {
    constructor(options){
        this.options = options
        this.routerMap = {}
        this.data = _Vue.observable({   //创建响应式对象 用于监听路由变化
            current:'/'
        })
    }
    static install (Vue) {
        //1.判断当前插件是否已安装
        if(VueRouter.install.installed){
            return
        }
        VueRouter.install.installed = true
        //2.把Vue构造函数记录到全局变量
        _Vue = Vue
        //3.把创建Vue实例时候传入的router对象注入到Vue实例上
        _Vue.mixin({
            beforeCreate() {  //beforeCreate 里this就是指向vue实例
                if(this.$options.router) { //只执行一次，组件不执行
                    _Vue.prototype.$router = this.$options.router;
                    this.$options.router.init()
                }
                
            },
        })

    }
    init () {
        this.createRouterMap()
        this.initComponents(_Vue)
        this.initEvent()
    }
    createRouterMap () {  //把传过来的options里的路由规则放到routerMap里
        //遍历所有的路由规则，解析成键值对放到routerMap
        this.options.routes.forEach(route => {
            this.routerMap[route.path] = route.component
        });
    }
    initComponents (vue) { 
        const self = this
        _Vue.component('router-link',{
            props:{
                to : String,
            },
            // template:'<a :href="to"><slot></slot></a>' //运行时报错，不识别template，需要编译器编译为render函数，可在confing.js runtimeCompiler：true
            render (h) { // h 帮我们渲染虚拟dom,vue传给我们的
                return h('a',{  
                    attrs:{
                        href : this.to,
                    },
                    on:{
                        click :this.clickHandler   
                    }
                },[this.$slots.default]) //获取插槽数据
            },
            methods: {
                clickHandler (e) {  //要a阻止默认行为，用pushState控制跳转
                    history.pushState({},'',this.to)
                    this.$router.data.current = this.to //因为是data响应式的，改变之后会请求对应的组件
                    console.log(this.$router.data)
                    e.preventDefault();
                }
            },
        })
        _Vue.component('router-view',{
             render (h) {
                const component = self.routerMap[self.data.current] //当前路由地址
                console.log('comp',component)
                return h(component)
            }
        })
    }

    initEvent () { //注册popstate事件，浏览器前进后退可以显示对应页面
        window.addEventListener('popstate',()=>{  //箭头函数不改变this指向，this指向initEvent
            this.data.current = window.location.pathname
        })
    }

}


// const newVueRouter = (options) => {
//     return {
//         install : (Vue) => {

//         }
//     }
// }
// export default newVueRouter